import 'package:bruno/bruno.dart';
import 'package:common/common.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:miaowu/app/theme/font.dart';

void showGiftListWidget(BuildContext context) {
  showModalBottomSheet(
      context: context,
      builder: (_) {
        return const MessageGiftWidget();
      });
}

class MessageGiftWidget extends StatefulWidget {
  const MessageGiftWidget({super.key});

  @override
  State<MessageGiftWidget> createState() => _MemberPayWidgetState();
}

class _MemberPayWidgetState extends State<MessageGiftWidget> {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  final List<Map<String, dynamic>> _menuData = [
    {"name": "菜单0", "img": "images/testimg/ic_launcher.png"},
    {"name": "菜单1", "img": "images/testimg/ic_launcher.png"},
    {"name": "菜单2", "img": "images/testimg/ic_launcher.png"},
    {"name": "菜单3", "img": "images/testimg/ic_launcher.png"},
    {"name": "菜单4", "img": "images/testimg/ic_launcher.png"},
    {"name": "菜单5", "img": "images/testimg/ic_launcher.png"},
    {"name": "菜单6", "img": "images/testimg/ic_launcher.png"},
    {"name": "菜单7", "img": "images/testimg/ic_launcher.png"},
    {"name": "菜单8", "img": "images/testimg/ic_launcher.png"},
    {"name": "菜单9", "img": "images/testimg/ic_launcher.png"},
    {"name": "菜单10", "img": "images/testimg/ic_launcher.png"},
    {"name": "菜单11", "img": "images/testimg/ic_launcher.png"},
    {"name": "菜单12", "img": "images/testimg/ic_launcher.png"},
    {"name": "菜单13", "img": "images/testimg/ic_launcher.png"},
    {"name": "菜单14", "img": "images/testimg/ic_launcher.png"},
    {"name": "菜单15", "img": "images/testimg/ic_launcher.png"},
  ];

  int _pageIndex = 0;
  GlobalKey giftKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    int totalCount = _menuData.length; // 总数
    int pageItemCount = 8; // 每页展示几个
    int crossAxisCount = 4; // 每行展示几列
    int pageCount =
        (totalCount % pageItemCount) > 0 ? (totalCount ~/ pageItemCount) + 1 : (totalCount ~/ pageItemCount); // 总的页数

    return Container(
      height: 380,
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(topLeft: Radius.circular(16.r), topRight: Radius.circular(16.r))),
      child: Stack(
        children: [
          Image.asset('assets/app/images/member/member_pay_bg.png'),
          Container(
            color: Colors.transparent,
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 1, vertical: 5),
                  child: OverflowBar(
                    alignment: MainAxisAlignment.spaceBetween,
                    children: [
                      SizedBox(
                        child: TextButton(
                          onPressed: () => Navigator.pop(context),
                          child: Image.asset('assets/app/images/member/member_pay_close.png', width: 15.sp),
                        ),
                      ),
                      const Expanded(child: SizedBox(width: 60)),
                    ],
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 12),
                    child: PageView.builder(
                      itemCount: pageCount,
                      onPageChanged: (index) {
                        _pageIndex = index;
                        setState(() {});
                      },
                      itemBuilder: (BuildContext context, int index) {
                        return ScrollConfiguration(
                            behavior: const ScrollBehavior(),
                            child: GridView.builder(
                              shrinkWrap: true,
                              physics: const NeverScrollableScrollPhysics(),
                              itemCount: (index < (totalCount ~/ pageItemCount))
                                  ? pageItemCount
                                  : (totalCount % pageItemCount),
                              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                                crossAxisCount: crossAxisCount,
                                mainAxisSpacing: 13,
                                crossAxisSpacing: 12,
                                childAspectRatio: 78 / 104,
                              ),
                              itemBuilder: (context, position) {
                                Map<String, dynamic> dict = _menuData[index * pageItemCount + position];
                                return Container(
                                  alignment: Alignment.center,
                                  padding: const EdgeInsets.symmetric(vertical: 10),
                                  decoration: BoxDecoration(
                                      color: const Color(0xFFF2F5FF),
                                      borderRadius: BorderRadius.circular(8),
                                      border: Border.all(color: const Color(0xFF25D4D0), width: 1)),
                                  child: Column(
                                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                    children: [
                                      Image.asset('assets/images/app_logo.png', width: 40, height: 40),
                                      Text(dict['name'].toString(), style: const TextStyle(fontSize: 12)),
                                      Row(
                                        mainAxisAlignment: MainAxisAlignment.center,
                                        children: [
                                          Image.asset('assets/app/images/message/coin_icon.png', width: 12),
                                          const Text('999', style: TextStyle(fontSize: 12, color: Color(0xFF25D4D0))),
                                        ],
                                      )
                                    ],
                                  ),
                                );
                              },
                            ));
                      },
                    ),
                  ),
                ),
                Container(
                  height: 6,
                  alignment: Alignment.center,
                  child: ListView.builder(
                      shrinkWrap: true,
                      physics: const NeverScrollableScrollPhysics(),
                      scrollDirection: Axis.horizontal,
                      itemCount: pageCount,
                      itemBuilder: (context, index) {
                        return Container(
                          width: _pageIndex == index ? 20 : 10,
                          height: 10,
                          margin: const EdgeInsets.symmetric(horizontal: 3),
                          decoration: BoxDecoration(
                              color: _pageIndex == index ? Colors.greenAccent : Colors.grey,
                              borderRadius: BorderRadius.circular(3)),
                        );
                      }),
                ),
                Container(
                  height: 80,
                  alignment: Alignment.center,
                  padding: const EdgeInsets.only(left: 16, right: 16),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      SizedBox(
                        height: 80,
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Image.asset('assets/app/images/message/coin_icon.png', width: 28),
                            Padding(
                              padding: const EdgeInsets.symmetric(horizontal: 8.0),
                              child: Text('19999',
                                  style: TextStyle(color: Colors.black, fontSize: 16.sp, fontWeight: FontWeight.w600)),
                            ),
                            Text('马上充值', style: TextStyle(color: const Color(0xFF25D4D0), fontSize: 14.sp)),
                          ],
                        ),
                      ),
                      Container(
                        alignment: Alignment.center,
                        child: Row(
                          children: [
                            Container(
                              key: giftKey,
                              width: 82,
                              height: 44,
                              alignment: Alignment.center,
                              decoration: BoxDecoration(
                                  color: Colors.white,
                                  borderRadius: const BorderRadius.only(
                                      topLeft: Radius.circular(12), bottomLeft: Radius.circular(12)),
                                  border: Border.all(color: const Color(0xFF25D4D0), width: 1)),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Text('x', style: TextStyle(color: const Color(0xFF25D4D0), fontSize: 16.sp)),
                                  Text('12',
                                      style:
                                          TextStyle(color: Colors.black, fontSize: 16.sp, fontWeight: FontWeight.w600)),
                                ],
                              ),
                            ).onTap(() {
                              SendGiftPopWidget.show(context, sortKey: giftKey);
                            }),
                            Container(
                                width: 82,
                                height: 44,
                                alignment: Alignment.center,
                                decoration: const BoxDecoration(
                                    color: Color(0xFF25D4D0),
                                    borderRadius: BorderRadius.only(
                                        topRight: Radius.circular(12), bottomRight: Radius.circular(12))),
                                child: Text('赠送', style: TextStyle(color: Colors.white, fontSize: 16.sp))),
                          ],
                        ),
                      )
                    ],
                  ),
                ),
                SizedBox(height: MediaQuery.of(context).padding.bottom),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class SendGiftPopWidget {
  static show(BuildContext context, {required GlobalKey<State<StatefulWidget>> sortKey, int sortCheck = 0}) {
    BrnPopupWindow.showPopWindow(
      context,
      "提示内容",
      sortKey,
      spaceMargin: -5,
      backgroundColor: Colors.white,
      borderColor: Colors.white,
      borderWidth: 0,
      offset: 10,
      widget: SizedBox(
        height: 44 * 4 + 10,
        width: 127,
        child: Column(
          children: [
            GestureDetector(
              onTap: () {},
              child: _buildSortWarpper(number: 1, name: '一心一意', isCheck: sortCheck == 0),
            ),
            _buildLineWarpper(),
            GestureDetector(
              onTap: () {},
              child: _buildSortWarpper(number: 10, name: '十全十美', isCheck: sortCheck == 1),
            ),
            _buildLineWarpper(),
            GestureDetector(
              onTap: () {},
              child: _buildSortWarpper(number: 520, name: '我爱你', isCheck: sortCheck == 2),
            ),
            _buildLineWarpper(),
            GestureDetector(
              onTap: () {},
              child: _buildSortWarpper(number: 1314, name: '一生一世', isCheck: sortCheck == 2),
            ),
          ],
        ),
      ),
      paddingInsets: const EdgeInsets.all(5),
    );
  }

  static Container _buildLineWarpper() {
    return Container(
        height: 1,
        margin: const EdgeInsets.symmetric(horizontal: 10),
        alignment: Alignment.center,
        color: Colors.black.withOpacity(0.2));
  }

  static Container _buildSortWarpper({required int number, required String name, bool isCheck = false}) {
    return Container(
      height: 44,
      alignment: Alignment.center,
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Expanded(
            child: Text(number.toString(),
                style: TextStyle(color: const Color(0xFF333333), fontSize: 14.sp, fontWeight: AppFontWeight.medium)),
          ),
          Text(name,
              style: TextStyle(color: const Color(0xFF333333), fontSize: 14.sp, fontWeight: AppFontWeight.medium)),
          Padding(
            padding: const EdgeInsets.only(left: 8.0),
            child: isCheck ? Image.asset('assets/app/images/pond/pond_pop_check.png', width: 11) : const SizedBox(),
          )
        ],
      ),
    );
  }
}
